<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar :title="$t('step.order.title')" :backText="$t('common.return')" :border-bottom="false"></fa-navbar>

		<!-- 分段器 -->
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<!-- 列表卡片 -->
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(swiper, key) in list" :key="key">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box" v-if="orderList[key].length > 0">
							<view v-for="(item, index) in orderList[key]" :key="index" class="cardBox">
								<view class="cardContent">
									<!-- {{ card.content }} -->
									<view class="contentLeft">
										<view class="LeftTop">
											<image :src="item.activity.images" mode=""></image>

										</view>
										<view class="LeftBotton">

										</view>
									</view>
									<view class="contentRight">
										<view class="RightTop">
											<view class="top3">
												{{item.activity.title}}
											</view>
										</view>
										<view class="RightBotton">
											<view class="botton1" :style="{ color: status[item.status]['color']}">
												{{status[item.status]['name']}}
											</view>
											<view class="botton2">
												<view class="Dli">
													{{$t('common.currency')}}{{item.money}}
													<br>
													{{$t('activity.bet')}}
												</view>
												<view class="Dli">
													{{item.activity.total_number}}
													<br>
													{{$t('activity.players')}}
												</view>
												<view class="Dli">
													{{$t('common.currency')}}{{item.activity.prize_pool.toLocaleString("pt-BR")}}
													<br>
													{{$t('activity.pot')}}
												</view>
											</view>
										</view>
									</view>

									<view class="iconRight">
										<u-icon name="arrow-right" color="#107c10" size="35" bold
											@click="goPage('/pages/step/details?id='+item.id)"></u-icon>
									</view>
								</view>
							</view>
							<view class="u-p-30"><u-loadmore :status="loadStatus[key]" bgColor="#fff"
									:loadText="loadText"></u-loadmore>
							</view>
						</view>
						<view class="page-box" v-else>
							<view v-if="loadStatus[key]!='loadmore'">
								<view class="centre">
									<image src="../../static/image/order.png" mode=""></image>
									<view class="explain">
										{{$t('step.no activity')}}
									</view>
									<view class="btn">
										<u-button size="medium"
											:custom-style="{ width: '220rpx', backgroundColor: theme.bgColor, color: theme.color }"
											shape="circle" @click="goPage('/pages/activity/lists')">
											{{$t('step.take a stroll')}}
										</u-button>
									</view>
								</view>
							</view>
							<view class="u-p-t-60 u-flex u-row-center" v-else>
								<u-loading mode="flower" size="72"></u-loading>
							</view>
						</view>
					</scroll-view>
				</swiper-item>

			</swiper>
		</view>

		<!-- 底部导航 -->
		<!-- <fa-tabbar></fa-tabbar> -->
	</view>
</template>
<script>
	// 引入uniapp的API
	// #ifdef APP-PLUS
	var StepCounter = uni.requireNativePlugin('YStep-Counter');
	// #endif

	var that;
	export default {
		data() {
			return {
				currentSteps: 0, // 当前步数
				activeDay: 7400, // 活跃日步数标准
				powerDay: 9000, // 强力日步数标准
				orderList: [
					[],
					[],
					[],
					[],
					[]
				],

				current: 0,
				swiperCurrent: 0,
				dx: 0,
				page: [1, 1, 1, 1, 1],
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore'],
				has_more: [false, false, false, false, false],

			};
		},
		computed: {
			list() {
				return [{
					name: this.$t('step.order.all'),
					status: 'all'
				}, {
					name: this.$t('step.order.stepping'),
					status: 'stepping'
				}, {
					name: this.$t('step.order.signup'),
					status: 'signup'
				}, {
					name: this.$t('step.order.split'),
					status: 'split',
				}, {
					name: this.$t('step.order.failed'),
					status: 'failed',
				}]

			},
			status() {
				return {
					signup: {
						color: '#2979ff',
						name: this.$t('step.order.signup')
					},
					stepping: {
						color: '#ff9900',
						name: this.$t('step.order.stepping')
					},
					split: {
						color: '#19be6b',
						name: this.$t('step.order.split')
					},
					failed: {
						color: '#606266',
						name: this.$t('step.order.failed')
					}
				}
			},
			loadText() {
				return {
					loadmore: this.$t('common.load.loadmore'),
					loading: this.$t('common.load.loading'),
					nomore: this.$t('common.load.nomore')
				}
			}
		},
		onLoad() {
			console.log('onLoad')

			that = this


			this.getOrderList(0)

		},
		watch: {
			current(newValue, oldValue) {
				this.getOrderList(newValue, 'init');
			}
		},
		methods: {


			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				this.orderList[index] = [];
				this.getOrderList(index, 'init');
			},
			reachBottom() {
				if (this.loadStatus[this.current] == 'loadmore') {
					this.page[this.current] = this.page[this.current] + 1;
					this.loadStatus.splice(this.current, 1, 'loading');
					this.getOrderList(this.current);
				}

			},
			getOrderList(idx, type) {
				if (type == 'init' && this.orderList[idx].length > 0) {
					console.log(this.orderList[idx].length, idx)
					return;
				}
				this.$api.activityOrderList({
					page: this.page[idx],
					status: this.list[idx].status
				}).then(result => {
					const {
						code,
						data: res,
						msg
					} = result;
					if (code == 1) {
						res.data.forEach(item => {
							this.orderList[idx].push(item);
						});
						//console.log(this.orderList[idx])
						if (res.current_page < res.last_page) {
							this.loadStatus.splice(this.current, 1, 'loadmore');
						} else {
							this.loadStatus.splice(this.current, 1, 'nomore');
						}
					}
				});

			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}


		}
	};
</script>

<style lang="scss" scoped>
	.inviteText {
		height: 35px;
		line-height: 35px;
		text-align: center;
		font-size: 13px;
		background-color: #29BC64;
		color: #fff;
	}



	//计步器
	.container {
		padding-bottom: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 200px;

		position: relative;

	}

	.circle-canvas {
		width: 150px;
		height: 150px;
		position: relative;
		/* 确保绝对定位的容器 */
	}

	.step-center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* 精确地将步数放在圆心 */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.current-steps {
		font-size: 24px;
		/* 当前步数字体大小 */
		font-weight: bold;
		color: #B7BAC3;
	}

	.step-text {
		font-size: 16px;
		/* "steps" 文本的字体大小 */
		color: #888;
	}

	.step-info {
		position: absolute;
		left: 50%;
		top: 140px;
		margin-top: 10px;
		text-align: center;
		font-size: 14px;
	}

	.step-info text {
		display: block;
		margin-top: 10px;
		font-size: 12px;
		color: #888;
	}

	.step-info2 {
		position: absolute;
		right: 14%;
		top: 80px;
		margin-top: 10px;
		text-align: center;
		font-size: 14px;
	}

	.step-info2 text {
		display: block;
		margin-top: 10px;
		font-size: 12px;
		color: #888;
	}

	.updateNow {
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 30px;
		line-height: 35px;
		text-align: center;
		font-size: 12px;
		background-color: #29BC64;
		color: #fff;
	}

	.shareText {
		position: absolute;
		right: 20px;
		top: 0;
		margin-top: 10px;
		color: #29BC64;
		font-weight: bold;

	}

	.split {
		border-top: #eeeeee solid 1px;
		border-bottom: #eeeeee solid 1px;
		height: 10px;
		background-color: #ebfbee;
	}

	.weekTime {
		height: 180px;
		background-color: #fff;

		.weekTitle {
			font-weight: bold;
			font-size: 13px;
			padding: 10px 0 10px 10px;
			color: #6c7379;
		}

		.weekFlex {
			height: 150px;
			display: flex;
			color: #ebfbee;

			// background-color: #ebfbee;
			.week {
				text-align: center;
				width: 60px;

				// background-color: #888;
				.top {
					text-align: center;
					padding-top: 10px;
					font-size: 14px;
					color: #868e96;
				}

				.unknow {
					margin: 10px auto;
					height: 35px;
					width: 35px;
					font-size: 22px;
					line-height: 35px;

					border-radius: 35px;
					border: 1px dashed #B7BAC3;
				}

				.stepping {
					margin: 10px auto;
					height: 35px;
					width: 35px;
					font-size: 22px;
					line-height: 35px;
					background-color: #ccc;
					border-radius: 35px;
					border: 2px dashed #fff;
				}

				.lost {
					margin: 10px auto;
					height: 35px;
					width: 35px;
					font-size: 22px;
					line-height: 35px;
					background-color: #C1E804;
					border-radius: 35px;
					border: 1px solid #B7BAC3;
				}

				.power {
					margin: 10px auto;
					height: 35px;
					width: 35px;
					font-size: 22px;
					line-height: 35px;
					background-color: #29BC64;
					border-radius: 35px;
					border: 1px solid #29BC64;
				}

				.active {
					margin: 10px auto;
					height: 35px;
					width: 35px;
					font-size: 22px;
					line-height: 35px;
					background-color: #C1E804;
					border-radius: 35px;
					border: 1px solid #C1E804;
				}

				.bottom {
					text-align: center;

					font-size: 14px;
					color: #868e96;
				}
			}



		}
	}

	.cardBox {
		width: 100%;
		height: 130px;
		border-bottom: 1px #d2d0ce solid;
		box-sizing: border-box;

		.cardContent {
			padding: 10px;
			display: flex;

			.contentLeft {
				width: 25%;

				.LeftTop {

					image {
						width: 100%;
						height: 80px;
						border-radius: 8px;
					}
				}

				.LeftBotton {
					width: 100%;
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #ff8c00;
					padding: 0 8px;
				}
			}

			.contentRight {
				width: 65%;
				padding: 0 10px;

				.RightTop {
					width: 100%;

					.top1 {
						color: #ff8c00;
						font-size: 14px;
					}

					.top2 {
						color: #605e5c;
						font-size: 12px;
					}

					.top3 {
						color: #000000;
						font-size: 15px;
						font-weight: bold;
					}
				}

				.RightBotton {
					width: 100%;

					.botton1 {
						margin: 10px;
						font-size: 18px;
					}

					.botton2 {
						font-size: 12px;
						display: flex;

						.Dli {
							margin-right: 20px;
						}
					}
				}

			}

			.iconRight {
				width: 10%;

				display: flex;
				align-items: center;
				justify-content: center;

			}
		}
	}

	.subCon {

		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #dff6dd;
		// padding: 0 10px;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.page-box {
		padding-top: 30rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.centre {
		text-align: center;
		padding: 104px 0;
		font-size: 16px;
	}

	.centre .btn {
		margin: 41px auto;
		width: 104px;
		border-radius: 16px;
		line-height: 33px;
		color: #ffffff;
		font-size: 13px;
	}
</style>